<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				margin: 0px;
				width: 100%;
				height: 100%;
			}

			.div1 {
				position: absolute;
				width: 100%;
				height: 100%;
				background: url(img/背景图.jpg) no-repeat;
				background-size: 100% 100%;
				margin: 0px;
				z-index: -1;
			}

			ul {
				/* width: 100%; */
				height: 70px;
				margin: 0px;
				padding-top: 30px;
				background-color: #000000;
				opacity: 0.5;
			} 

			ul li {
				display: inline;
			}


			.h1 {
				float: left;
				/* display: inline-block; */
				/* margin-left: 30px;
				padding-top: 150px; */
				width: 130px;
				font-size: 30px;
				color: #1E9FFF;
				/* transform: translate(0px,-50px); */
				transform: skew(10deg, 10deg);
				
			}

			.h2 {
				float: left;
				/* padding-left: 180px; */
				/* padding-top: 15px; */
				color: #1E9FFF;
				font-size: 50px;
				transform: rotateZ(3deg);
				text-shadow: 0px 5px 10px #1E9FFF;
				display: inline;
			}

			.div5 {
				float: right;
				margin-right: 10px;
				width: 80px;
				height: 25px;
				border: 1px solid white;
				text-align: center;
				line-height: 25px;
				border-radius: 8px;
			}
			.img{
				margin-top: 40px;
				margin-left: 400px;
				width: 101.5px;
			}
			.img img:hover{
				position:relative;
				width: 200px;
				transform: scale(1.4);
			}
			.img img {
			    height: auto;
				transition: width 2s,height 2s,transform 2s;
			}
			.desc {
			    padding: 6px;
			    text-align: center;
			}
			.desc a{
				color: #000000;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<ul>
				<li>
					<div class="h1">We are</div>
				</li>
				<li>
					<div class="h2">Venom</div>
				</li>
				<li>
					<div class="div5"><a href="#">嚎叫</a></div>
				</li>
				<li>
					<div class="div5"><a href="#">屠杀</a></div>
				</li>
				<li>
					<div class="div5"><a href="#">毒液</a></div>
				</li>
			</ul>
			
			<div class="responsive">
			  <div class="img">
			      <img src="img/毒液的味道.jpg" width="100">
			    <div class="desc"><a href="#">毒液的味道</a></div>
			  </div>
			</div>
			
			<div class="responsive">
			  <div class="img">
			      <img src="img/暴虐.jpg" width="100">
			    <div class="desc"><a href="#">暴虐</a></div>
			  </div>
			</div>
			
			<div class="responsive">
			  <div class="img">
			      <img src="img/Spider.jpg" width="100">
			    <div class="desc"><a href="#">Spider</a></div>
			  </div>
			</div>
			
			<div class="responsive">
			  <div class="img">
			      <img src="img/venom4.jpg" width="100">
			    <div class="desc"><a href="#">venom4</a></div>
			  </div>
			</div>
		</div>

	</body>
</html>
